<template>
	<div style="padding-left: 20px;">
		<el-card class="box-card" style="height: 70vh;">
			<div slot="header" class="clearfix">
				<span
					style="    line-height: 18px; color: rgba(0,0,0,0.45); font-size: 16px; margin-bottom: 12px;">待办任务</span>
				<i class="el-icon-refresh" @click="getList"></i>
				<el-button style="float: right; padding: 3px 0" type="text" @click="taskDetail">任务办理</el-button>
			</div>
			<div v-for="(item,index) in list" class="task-row" @click="complete(index,item)">
				<span>
					{{ item.processVariables.title }}
				</span>
				<el-tag style="float: right;" :type="item.processVariables.isBack ? 'danger' : ''">
					{{item.taskName}}
				</el-tag>
				<el-divider></el-divider>
			</div>
			<div class="end">
				<el-divider style='margin:24px 0 !important;'>任务总数：{{page.total}}</el-divider>
			</div>
		</el-card>

		<el-dialog :width="flowDialog.width" :heigth="flowDialog.heigth" :fullscreen="flowDialog.fullscreen"
			:visible.sync="common.completeFormVisible" center>
			<div  slot="title" class="dialog-title">
				<div class="dialog-header">
				{{$t('flowable.resolveTask')}}
				</div>
			</div>
			<component ref="auditComponent" :is="current" :msg="current"
				:processParam.sync="processParam"
				:nodeParam.sync="nodeParam"
				:taskInfo="taskInfo"
				:comment.sync="comment"
				:flowDialog.sync="flowDialog"></component>
			<div  v-if="common.showBtn" slot="footer" class="dialog-footer" style="border-top: 1px solid #dfe6ec ;">
				<div class="dialog-btn-top">
					<el-button icon="el-icon-close" type="danger" @click="reject">{{ $t('common.rejectBtn') }}</el-button>
					<el-button icon="el-icon-check" type="primary" @click="submitForm">{{ $t('common.submitBtn') }}</el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import request from '@/utils/request'
	export default {
		name: 'flowCard',
		data() {
			return {
				list: [],
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 20,
					total: 0,
					currentPage: 1
				},
				current: "commonAudit",
				flowDialog: {
					width: "35%",
					heigth: "30%",
					fullscreen: false
				},
				//通用的一些信息
				common: {
					completeFormVisible: false,
					showBtn: true
				},
				// 流程变量
				processParam: {},
				// 当前节点变量
				nodeParam:{},
				// 当前任务信息
				taskInfo: {},
				// 审批意见
				comment: ""
			}
		},
		//页面初始化加载
		created() {
			this.getList();
		},
		methods: {
			//查询列表
			getList() {
				var querParams = {
					pageNo: this.page.currentPage,
					pageSize: this.page.pageSize
				}
				request({
					url: '/flowable/workflow/queryTodo',
					method: 'post',
					data: querParams
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},
			taskDetail() {
				this.$router.push(`/flowable/task/todo`)
			},
			//处理任务
			complete(index, row) {
				debugger
				this.current = () => import('@/views/flowable/task/common/common-audit')
				if(row.taskFormKey){
					this.current = resolve => require.ensure([], () => resolve(require('@/views/flowable/task/custom/' + row.processDefinitionKey + '/' + row.taskFormKey + ".vue")));
				}
				this.taskInfo = row;
				this.nodeParam = row.variables;
				this.processParam = row.processVariables;
				this.common.completeFormVisible = true;
				this.common.showBtn = true;
			},
			//提交表单
			submitForm() {
				let  _this = this;
				// 判断是否存在保存方法
				if(this.$refs.auditComponent.beforeSubmit){
					let result = this.$refs.auditComponent.beforeSubmit()
					if(!result){
						return ;
					}
				}
				if(!this.processParam){
					this.processParam = {}
				}
				this.processParam["isBack"] = false;
				var params = {
					taskId: this.taskInfo.taskId,
					comment: this.comment,
					processParamStr: JSON.stringify(this.processParam),
					nodeParamStr: JSON.stringify(this.nodeParam)
				}
				request({
					url: '/flowable/workflow/completeTask',
					method: 'post',
					data: params
				}).then(response => {
					debugger
					_this.getList()
					if(_this.$refs.auditComponent.beforeSubmit){
						let result = _this.$refs.auditComponent.afterSubmit()
						if(!result){
							return ;
						}
					}
					_this.common.completeFormVisible = false;
				})
			},
			//驳回
			reject() {
				let _this = this;
				// 判断是否存在保存方法
				if(this.$refs.auditComponent.beforeSubmit){
					let result = this.$refs.auditComponent.beforeSubmit()
					if(!result){
						return ;
					}
				}
				if(!this.processParam){
					this.processParam = {}
				}
				this.processParam["isBack"] = true;
				var params = {
					taskId: this.taskInfo.taskId,
					processInstanceId: this.taskInfo.processInstanceId,
					comment: this.comment,
					processParamStr: JSON.stringify(this.processParam),
					nodeParamStr: JSON.stringify(this.nodeParam)
				}
				request({
					url: '/flowable/workflow/rollback',
					method: 'post',
					data: params
				}).then(response => {
					debugger
					_this.getList()
					if(_this.$refs.auditComponent.beforeSubmit){
						let result = _this.$refs.auditComponent.afterSubmit()
						if(!result){
							return ;
						}
					}
					_this.common.completeFormVisible = false;
				})
			},
		}
	}
</script>

<style>
	.task-row {
		/* font-weight: bold; */
		font-size: 14px;
		line-height: 18px;

	}

	.item {
		padding: 18px 0;
	}

	.el-divider--horizontal {
		margin: 13px 0 !important;
	}

	.end .el-divider--horizontal {
		margin: 24px 0 !important;
	}
</style>
